<body class="main">
        <!-- child of the body tag -->
        <div class="top"></div>
        <div class="top-nav fixed">
            <div class="container">
                <a class="scroller bp-main-top" href="#main">BULLYPROOF</a>
                <div class="btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle btn-bully-proof" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#what" class="scroller">What is BULLYPROOF?</a></li>
                    <li><a href="#who" class="scroller">Who is BULLYPROOF?</a></li>
                    <li><a href="#signup" class="scroller">Sign Up</a></li>
                  </ul>
                </div>
                <div class="pull-right icons-right">
                    <a href="<?php echo base_url() ?>infographic"><i class="ion ion-information-circled"></i></a>
                    <a href="mailto:bullyproofph@gmail.com" target="_blank"><i class="ion ion-email"></i></a>
                    <a href="http://www.facebook.com/bullyproofph" target="_blank"><i class="ion ion-social-facebook"></i></a>
                    <a href="http://www.twitter.com/bullyproofph" target="_blank"><i class="ion ion-social-twitter"></i></a>
                </div>
            </div>
        </div>
        <div id="main" class="main-section section">
            <img class="bp-logo" src="<?php echo $img_dir ?>bullyproof.png">
            <p class="main-caption">Small things can turn into big problems.</p>
            <p class="main-caption">Bullyproof your school now.</p>
            <div class="main-button">
                <a href="#info" class="btn btn-clear scroller">Learn More</a>
                <a href="#signup" class="btn btn-clear scroller">Sign up</a>
                 <a href="<?php echo base_url(); ?>infographic" class="btn btn-clear">Infographics &raquo;</a>
            </div>
        </div>
        <div id="info" class="info-section section">
                <div class="row">
                    <div class="col-xs-6 info-link">
                        <a class="scroller" href="#what">What is BULLYPROOF?</a>
                    </div>
                    <div class="col-xs-6 info-link">
                        <a class="scroller" href="#who">Who is BULLYPROOF?</a>
                    </div>
                </div>
                <div class="main-button" style="margin-top:20rem;">
                    <a href="#signup" class="btn btn-clear scroller">Sign up</a>
                </div>
        </div>
        <div id="what" class="what-section section">
            <div class="what-text-container">
                <h1>What is BULLYPROOF?</h1>
                <p class="what-text">
                    BULLYPROOF is an advocacy campaign to end the<br/>
                    culture of fear and violence by means of widening<br/> 
                    the common perceptions that surround bullying,<br/> 
                    providing skills training to address bullying situations,<br/> 
                    and sharing pertinent studies and information on<br/> 
                    bullying through workshops and seminars.
                </p>
                <div class="main-button">
                    <a href="#info" class="btn btn-clear scroller">&laquo; Back</a>
                    <a href="#signup" class="btn btn-clear scroller">Sign up</a>
                </div>
            </div>
        </div>
    
        <div id="who" style="background:#fff;" class="who-section section">
            <div class="who-text-container">
                <div class="who-back">
                    <h1>Who is BULLYPROOF?</h1>
                </div>
                <div class="row">
                <div style="width:300px;margin:0 auto">
                    <div id="rotatescroll">
                        <div class="viewport">
                            <ul class="overview">
                                <li>
                                    <a href="http://www.iacademy.edu.ph" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/iacademy.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://woodridge.edu.ph" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/wclogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.amazinggraceschool.org/" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/aglogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.saintanthonyschool.edu.ph/" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/salogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.smws.edu.ph/" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/stmarylogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.pwu.edu.ph/jasms-qc.html" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/pwulogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.fis.edu.ph/index.html" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/fislogo.jpg" /></a>
                                </li>
                                <li>
                                    <a href="http://www.dps.edu.ph/" target="_blank" class="iacademy-link"><img src="<?php echo $img_dir; ?>school_logos/dpslogo.jpg" /></a>
                                </li>
                            </ul>
                        </div>

                        <div class="dot"></div>
                        <div class="overlay"></div>
                        <div class="thumb"></div>
                    </div>
                </div>
                </div>
                <div class="main-button">
                    <a href="#info" class="btn btn-clear scroller">&laquo; Back</a>
                    <a href="#signup" class="btn btn-clear scroller">Sign up</a>
                </div>
            </div>
            <div class="school-info-container hidden">
                <h1>iACADEMY</h1>
                <div class="row">
                    
                </div>
            </div>
        </div>
        <div id="signup" class="signup-section section">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <h1>Be part of the initiative.</h1>
                        <p class="signup-text">
                            Please fill out this form to BULLYPROOF your academic institution.<br />
                            Our group requires that your institution host or have representatives <br />
                            attend a workshop led by our team of experts. Please enter a valid <br />
                            email address, as we will be contacting you regardingthe different types <br />
                            of workshops and seminars that we offer. 
                        </p>
                    </div>
                    <div class="col-sm-6">
                    <form id="submit-app" method="post" action="<?php echo base_url(); ?>home/submit_application">
                            <div class="row">
                                <div class="col-xs-12">
                                    <input placeholder="NAME" type="text" class="form-control" name="name" />
                                    <p class="error" rel="name"></p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <input placeholder="ACADEMIC INSTITUTION" type="text" class="form-control" name="academic_institution" />
                                    <p class="error" rel="academic_institution"></p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <input placeholder="EMAIL" type="email" class="form-control" name="email" />
                                    <p class="error" rel="email"></p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <input placeholder="CONTACT NUMBER" type="number" class="form-control" name="contact" />
                                    <p class="error" rel="contact"></p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <textarea placeholder="ADDRESS" rows=3 class="form-control" name="address" ></textarea>
                                    <p class="error" rel="address"></p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12">
                                    <textarea placeholder="QUESTIONS, COMMENTS, OR SUGGESTIONS: If you would like to be a part of our initiative in other ways, please feel free to let us know in this section." rows=5 class="form-control" name="message" ></textarea>
                                    <p class="error" rel="message"></p>
                                </div>
                        </div>


                            <div class="row" style="width:20%;margin:3rem auto;">
                                <input type="submit" class="btn btn-clear" value="SUBMIT" >
                            </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" style="right: 70px; display: inline;" class="btn back-to-top btn-dark btn-fixed-bottom"> <span class="glyphicon glyphicon-chevron-up"></span> </a>
</div>